<template>
    <div class="app-container">
        <div class="filter-container">
            <el-date-picker v-model="q_p_formDate1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('table.search') }}</el-button>
            <el-button @click="handleExport" type="primary" icon="el-icon-download">
                导出
            </el-button>
        </div>
        <el-table :data="tableData" row-key="index" highlight-current-row border
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="statementCode" label="对账单单号" />
            <el-table-column prop="invoiceCode" label="发票号" />
            <el-table-column prop="outStoreNos" label="出库单号" />
            <el-table-column prop="invoiceDate" label="日期" width="100px" />
            <el-table-column prop="ourHeaderId" label="公司方抬头">
                <template slot-scope="{row:{ourHeader}}">
                    {{ ourHeader.name }}/{{ ourHeader.taxpayer }}/{{ ourHeader.bankDetail }}
                </template>
            </el-table-column>
            <el-table-column prop="sellHeaderId" label="销售方抬头">
                <template slot-scope="{row}">
                    {{ row.beneficiaryAccountName }}/{{ row.bankAccount }}/{{ row.bankName }}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="taxRate" label="税率" /> -->
            <el-table-column prop="taxAmount" label="税额" />
            <el-table-column prop="amount" label="金额（不含税）" />
            <el-table-column prop="totalAmount" label="金额（含税）" />
            <el-table-column prop="status" label="状态" width="80px">
                <template slot-scope="{row:{status}}">
                    {{ status == 0 ? '待开票' : '已开票' }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px;" :current-page="query.pageIndex" :page-sizes="[5, 10, 20, 50]"
            :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script>
import {
    reportSellStatementList,
    reportExportSellStatementList
} from "@/api/reporting";
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { downfile } from '@/utils'

export default {
    name: 'Customerforecast',
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            q_p_formDate1:[],
            query: {
                pageIndex: 1,
                pageSize: 20,
                startDate:'',
                endDate:''
            },
            tableData: [],
            selectedList: []
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        async handleExport() {
            try {
                await reportExportSellStatementList(this.query.query)
            } catch (err) {
                const reader = new FileReader();
                reader.readAsText(err);
                reader.onload = (event) => {
                    const resultString = reader.result; // 这里就是转换后的字符串
                    if (resultString.includes('code') && resultString.includes('isSuccess')) {
                        this.$message.error(JSON.parse(resultString).message)
                    } else {
                        downfile("销售开票报表.xlsx", err);
                    }
                }
            }
        },
        search() {
            if(this.q_p_formDate1){
                this.query.startDate = this.q_p_formDate1[0]
                this.query.endDate = this.q_p_formDate1[1]
            }else{
                this.query.startDate = ''
                this.query.endDate = ''
            }
            this.query.pageIndex = 1
            this.getInfo()
        },
        handleSizeChange(size) {
            this.query.pageSize = size
            this.getInfo()
        },
        handleCurrentChange(currentPage) {
            this.query.pageIndex = currentPage
            this.getInfo()
        },
        async getInfo() {
            const { list, total } = await reportSellStatementList(this.query)
            this.tableData = list
            this.total = total
        }
    }
}

</script>
<style>
.item {
    padding: 10px 30px;
    border: 0.5px solid #dfe6ec;

}

.name {

    font-weight: bold;
}

.item1 {
    /*color:#999;*/
    /*font-size:14px;*/
}
</style>